<template>
  <div class="media-library-container">
    <div class="filter-section">
      <!-- 使用 ElementPlus 的 Select 组件 -->
      <el-select
        v-model="selectedDirId"
        @change="onSelectChange"
        placeholder="请选择目录"
        size="small"
      >
        <el-option v-for="dir in fileDirList" :key="dir.id" :value="dir.id" :label="dir.name" />
      </el-select>
      <!--      <el-date-picker
        v-model="createTime"
        value-format="YYYY-MM-DD HH:mm:ss"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
        class="!w-240px"
      />-->
      <el-button type="primary" plain @click="openForm" size="small"> 上传文件 </el-button>
    </div>
    <div class="image-grid-section">
      <div class="image-grid">
        <div v-for="file in files" :key="file.id" class="image-container">
          <el-image
            :src="file.url"
            :id="file.id"
            @click="onSelectFile(file)"
            class="image"
            fit="cover"
          />
        </div>
      </div>
      <!-- 使用 ElementPlus 的 Pagination 组件 -->
      <el-pagination
        class="pagination"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      />
    </div>

    <!-- 表单弹窗：添加/修改 -->
    <FileForm ref="formRef" @success="onSelectChange" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'
import { FileDirApi } from '@/api/infra/filedir'
import { getFilePage } from '@/api/infra/file'
import { IDomEditor } from '@wangeditor/editor'
import FileForm from '@/views/infra/file/FileForm.vue'

export default defineComponent({
  components: { FileForm },
  props: {
    editor: {
      type: Object as () => IDomEditor,
      required: true
    }
  },
  setup(props) {
    const fileDirList = ref<any[]>([])
    const selectedDirId = ref<number | null>(null)
    const createTime = ref<string>()
    const files = ref<any[]>([])
    const currentPage = ref<number>(1)
    const pageSize = ref<number>(10)
    const total = ref<number>(0)
    const totalPages = ref<number>(0)
    /** 添加/修改操作 */
    const formRef = ref()
    const openForm = () => {
      formRef.value.open()
    }
    const getDir = async () => {
      try {
        const res = await FileDirApi.getFileDirList(null)
        const allCategory = { id: null, name: '全部' }
        fileDirList.value = [allCategory, ...res]
        getPic()
      } catch (error) {
        console.error('获取文件目录列表失败', error)
      }
    }

    const getPic = async () => {
      try {
        const res = await getFilePage({
          dirId: selectedDirId.value,
          pageSize: pageSize.value,
          pageNo: currentPage.value,
          createTime: createTime.value
        })
        files.value = res.list
        total.value = res.total
        totalPages.value = Math.ceil(total.value / pageSize.value)
      } catch (error) {
        console.error('获取文件列表失败', error)
      }
    }

    const onSelectChange = () => {
      currentPage.value = 1
      getPic()
    }

    const onSortChange = () => {
      currentPage.value = 1
      getPic()
    }

    const onUploadClick = () => {
      console.log('点击了批量上传')
    }

    const onSelectFile = (file: any) => {
      props.editor.restoreSelection()
      props.editor.insertNode({
        type: 'image',
        src: file.url,
        style: {
          width: '100%',
          maxWidth: '100%'
        },
        children: [{ text: '' }]
      })
      props.editor.hidePanelOrModal()
    }

    const handleSizeChange = (newSize: number) => {
      pageSize.value = newSize
      currentPage.value = 1
      getPic()
    }

    const handleCurrentChange = (newPage: number) => {
      currentPage.value = newPage
      getPic()
    }

    onMounted(() => {
      getDir()
    })

    return {
      fileDirList,
      selectedDirId,
      createTime,
      files,
      currentPage,
      pageSize,
      total,
      totalPages,
      openForm,
      formRef,
      onSelectChange,
      onSortChange,
      onUploadClick,
      onSelectFile,
      handleSizeChange,
      handleCurrentChange
    }
  }
})
</script>

<style scoped>
/* 整体容器样式 */
.media-library-container {
  width: 450px;
  height: 320px;
  padding: 16px;
}

/* 筛选区域样式 */
.filter-section {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  margin-top: 16px;
  gap: 10px;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  height: calc(100% - 50px);
  overflow-y: auto;
}

/* 图片容器样式 */
.image-container {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease-in-out,
    box-shadow 0.2s ease-in-out;
}

.image-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

/* 图片样式 */
.image {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: cover;
}

/* 分页器样式 */
.pagination {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}
</style>
